<template>
  <div class="signUp_box">
    <el-page-header @back="goBackGames" content="比赛报名" style="margin-bottom: 20px">
    </el-page-header>
    <div class="signUp_title">
      <span>{{game.gameName}}</span>
    </div>
    <div class="step">
      <div class="step-title">报名</div>
      <el-steps class="step-main" :active="active.number" simple finish-status="success">
        <el-step title="填写报名信息" icon="el-icon-edit-outline">
        </el-step>
        <el-step title="确认报名信息" icon="el-icon-tickets"></el-step>
        <el-step title="报名成功" icon="el-icon-document-checked"></el-step>
      </el-steps>

      <!--表单-->
      <div class="fillIn-form" v-show="show.form">
        <el-form label-position="top" :rules="rules" ref="team" label-width="120px" :model="team" class="form">
          <el-form-item class="team_list" label="队伍名称 :" prop="groupName">
            <el-input v-model="team.groupName"></el-input>
          </el-form-item>
          <el-form-item class="team_list" label="本人姓名 :" prop="rname">
            <el-input v-model="team.rname"></el-input>
          </el-form-item>
          <el-form-item class="team_list" label="联系方式 :" prop="phone">
            <el-input v-model="team.phone"></el-input>
          </el-form-item>
          <el-form-item class="team_list" label="邮箱 :" prop="email">
            <el-input v-model="team.email"></el-input>
          </el-form-item>
          <el-form-item class="team_list" label="学校名称 :" prop="school">
            <el-input v-model="team.school"></el-input>
          </el-form-item>
          <el-form-item class="team_list" label="专业 :" prop="profession">
            <el-input v-model="team.sex"></el-input>
          </el-form-item>
<!--          <el-form-item class="team_list" label="指导老师 :" prop="teacher">-->
<!--            <el-input v-model="team.teacher"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item class="team_list" label="指导老师电话 :" prop="teacherPhone">-->
<!--            <el-input v-model="team.teacherPhone"></el-input>-->
<!--          </el-form-item>-->
        </el-form>
      </div>
      <!--表单-->

      <!--确认-->
      <div class="confirm" v-show="show.confirm">
        <el-descriptions title="确认报名信息" :column="2">
          <el-descriptions-item label="队名">{{ team.groupName }}</el-descriptions-item>
          <el-descriptions-item label="队长">{{ team.rname }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ team.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ team.email }}</el-descriptions-item>
          <el-descriptions-item label="学校">{{ team.school }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ team.sex }}</el-descriptions-item>
<!--          <el-descriptions-item label="指导老师">{{ team.teacher }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="指导老师联系方式">{{ team.grade }}</el-descriptions-item>-->
        </el-descriptions>
      </div>
      <!--确认-->

      <!--提交-->
      <div class="confirm" v-show="show.success">
        <el-descriptions title="确认报名信息" :column="2">
          <el-descriptions-item label="队名">{{ team.groupName }}</el-descriptions-item>
          <el-descriptions-item label="队长">{{ team.rname }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ team.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ team.email }}</el-descriptions-item>
          <el-descriptions-item label="学校">{{ team.school }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ team.sex }}</el-descriptions-item>
<!--          <el-descriptions-item label="指导老师">{{ team.teacher }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="指导老师联系方式">{{ team.grade }}</el-descriptions-item>-->
        </el-descriptions>
      </div>
      <!--提交-->



      <el-button class="submit" style="margin-top: 12px;" @click="next('team')" type="success" v-show="show.success">{{ active.text }}</el-button>
      <el-button class="next" style="margin-top: 12px;" @click="next('team')" type="success" v-show="!show.success">下一步</el-button>
      <el-button class="goBack" v-show="show.confirm" style="margin-top: 12px;" @click="goBack" type="primary">上一步</el-button>
    </div>
  </div>
</template>

<script>

export default {
  name: "signUp",
  data() {

    //队伍名表单验证
    const tname = (rule, value, callback) => {
      const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
      // if (!value) {
      //   return callback(new Error('用户名不能为空'));
      // } else
      if (pattern.test(value)) {
        return callback( new Error('队伍名不能包含特殊字符'))
      } else if (value.length>20) {
        return  callback( new Error('队伍名不能大于20个字符'))
      }
      callback()
    };
    //队伍名表单验证

    //手机号验证
    const phoneValidator = (rule, value, callback) => {
      // const regMobile = /^1[3|4|5|7|8]\d{9}$/;
      // if (!regMobile.test(value)) {
      //   return callback(new Error('手机号格式错误'));
      // }
      callback();
    }
    //手机号验证


    return{
      game: {},
      active: {
        number: 0,
        text: '下一步'
      },
      show: {
        form: true,
        confirm: false,
        success: false,
        // last: false
      },
      team: {
        gameID: '',
        groupName: '', // 队伍名
        rname: '', // 真名
        phone: '', // 联系方式
        school: '', // 学校
        email: '',  // 邮箱
        sex: '', // 专业
        // teacher: '', // 指导老师
        // teacherPhone: '' // 指导老师联系方式
      },
      rules: {
        groupName: [
          {required: true, message: '请填写参赛队伍名称', trigger: 'blur'},
          {validator: tname, trigger: 'blur'}
        ],
        rname: [{required: true, message: '请填写你的姓名', trigger: 'blur'}],
        phone: [
          {required: false,message: '请填写您的手机号', trigger: 'blur'},
          { validator: phoneValidator, trigger: 'blur'}
        ],
        school: [{required: true, message: '请填写学校信息', trigger: 'blur'}],
        email: [{required: false, message: '请填写邮箱信息', trigger: 'blur'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
        sex: [{required: true, message: '请填写专业信息', trigger: 'blur'}],
        // teacher: [{required: true, message: '请填写指导老师信息', trigger: 'blur'}],
        // teacherPhone: [{required: true, message: '请填写指导老师信息', trigger: 'blur'}]
      }
    }
  },
  methods: {
    goBackGames(){
      this.$router.push('/information/gamesDetails');
    },

    // 表单二次验证，满足条件则提交请求
    verify(team){
      let go = false;
      this.$refs[team].validate((valid) => {
        if (valid) {
          go = true
        } else {
          console.log('error submit!!');
          go = false;
        }
      });
      return go;
    },

    // 步骤条控制，前进
    next: function (team) {
      this.sign();
      this.signActive(team);
    },

    // 步骤条控制，回退
    goBack() {
      if(this.active.number !== 0) this.active.number -= this.active.number;
      this.signActive();
    },

  //  判断active.number的状态，操作active属性
    signActive(team) {
      const go = this.verify(team);
      if(this.active.number === 3) {
        this.$router.push('/home')
      }
      if (go && this.active.number++ > 2) this.active.number = 0;
      this.show.form = this.active.number === 0;
      this.show.confirm = this.active.number === 1;
      this.show.success = this.active.number >= 2;
      if(this.active.number === 2) {
        this.active.text = '提交';
      } else {
        this.active.text = '返回首页';
      }
    },

    //提交报名信息
    sign() {
      if(this.active.number === 2) {
        this.$api.addGruop(this.team)
            .then(res => {
              if(res.code === 200){
                this.$confirm('报名成功，请在参赛管理中完善参赛信息', '成功', {
                  confirmButtonText: '跳转至参赛管理',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$message({
                    type: 'success',
                    message: '报名成功!'
                  });
                  this.$router.push('/backIndex/teams');
                }).catch(() => {
                  this.$message({
                    type: 'success',
                    message: '报名成功'
                  });
                });
              } else  if(res.code === 100) {
                this.$confirm('报名失败，可能你以报名或或者队伍名重复了。请前往参赛页面查看是否报名，如果没有，请更改队名重新报名。', '失败', {
                  confirmButtonText: '跳转至参赛管理',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$message({
                    type: 'info',
                    message: '报名失败，可能你以报名或或者队伍名重复了。'
                  });
                  this.$router.push('/backIndex/teams');
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '报名失败，可能你以报名或或者队伍名重复了。'
                  });
                });
              }
            })
            .catch(err => {
              console.log(err);
            })
      }
    },
    // 获取比赛信息
    async getGametext(){
      const gameID = window.sessionStorage.getItem('gameID');
      this.game = await  this.$api.getGamebyId(gameID)
        .then(res => {
          return res.data.AdminName;
        })
      this.team.gameID = this.game.gameID;
    }

  },
  mounted() {
    this.getGametext()
  }
}
</script>

<style lang="less" scoped>
  .signUp_box{
    width: 1200px;
    height: 1200px;
    margin: 60px auto;
    //background-color: #909399;
    .signUp_title{
      margin: 0 auto;
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
    }
    .step{
      margin: 40px auto;
      height: 700px;
      //background-color: #409EFF;
      position: relative;
      .step-title{
        border-left: 10px solid darkgreen;
        font-size: 30px;
        font-weight: bolder;
        padding-left: 10px;
      }
      .step-main{
        width: 750px;
        position: absolute;
        top: 0;
        left: 100px;
      }
      .fillIn-form{
        width: 1000px;
        position: absolute;
        left: 0;
        top: 100px;
        .form{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .team_list {
            width: 450px;
          }
        }
        .step-button{
          position: absolute;
          right: -534px;
          bottom: -97px;
        }
      }
      .confirm{
        position: absolute;
        top: 100px;
        left: 0;
      }
      .submit{
        position: absolute;
        right: 651px;
        bottom: 330px;
      }
      .next{
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .goBack{
        position: absolute;
        right: 115px;
        bottom: 0;
      }
    }
  }
</style>
